<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商城管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <style>
        img[src=""],img:not([src]){
            opacity:0;
        }
    </style>
</head>

<div class="hold-transition skin-purple sidebar-mini">

    <%@include file="header.jsp"%>

    <%@include file="aside.jsp"%>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>分类管理
                <small>分类表单</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/pages/manage/main.jsp">
                        <i class="fa fa-dashboard"></i>首页
                    </a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/cate/findAllCate">
                        分类管理
                    </a>
                </li>
                <li class="active">分类表单</li>
            </ol>
        </section>

        <form action="${pageContext.request.contextPath}/product/add" enctype="multipart/form-data" method="post">
            <section class="content">
                <div class="panel panel-default">
                    <div class="page-header">商品信息</div>
                    <div class="row data-type">
                        <div class="col-md-2 title">商品名</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" name="product_name" placeholder="商品名">
                        </div>
                        <div class="col-md-2 title">商品介绍</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" name="product_description" placeholder="商品介绍">
                        </div>
                        <div class="col-md-2 title">商品价格</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" name="product_price" placeholder="价格">
                        </div>
                        <div class="col-md-2 title">商品库存</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" name="product_stock" placeholder="库存">
                        </div>
                        <div class="col-md-2 title">商品图片</div>
                        <div class="col-md-4 data">
                            <input type="file" class="form-control" name="product_image1" onchange="imgChange(event)" >
                        </div>
                        <div class="col-md-2 title">父类</div>
                        <div class="col-md-4">
                            <select style="width: 100%;height: 40px;" name="parentid">
                                <c:forEach var="f" items="${flist}">
                                    <option disabled="disabled">${f.cate_name}</option>
                                    <c:forEach items="${clist}" var="c">
                                        <c:if test="${c.cate_parent_id==f.cate_id}">
                                            <option value="${f.cate_id}-${c.cate_id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${c.cate_name}</option>
                                        </c:if>
                                    </c:forEach>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <img class="ima" src="" alt="" style="width: 200px;height: 200px;margin-left: 220px;"/>
                </div>

                <div class="box-tools text-center">
                    <button type="submit" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" onclick="location.href='${pageContext.request.contextPath}/product/findAllProduct'">返回</button>
                </div>
            </section>
        </form>
    </div>
</div>

<script src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
<script>

    function imgChange(e) {
        console.info(e.target.files[0]);//图片文件
        console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $('.ima').attr('src',this.result);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }

    $('ima').click(function () {
        $("#file").click();
    });

    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }
    $(document).ready(function() {
        // 激活导航位置
        setSidebarActive("product-manage");
    });
</script>
</body>

</html>


